<template>
    <div>
        <h2>for循环</h2>
        <!-- <ol>
            <li v-for="item in obj" :key="item.name">{{item.name}}   {{ item.price }}</li>
        </ol> -->
        <table class="table" border="1">
            <thead>
                <tr>
                    <th>水果</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in obj" :key="item.name">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                </tr>
            </tbody>
        </table>
        年龄：{{age}}
        <button @click="age++">年龄+1</button>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// const arr = ref(['apple', 'banana', 'orange']);
const obj = ref([
    {
        name: 'apple',
        price: 10
    },
    {
        name: 'banana',
        price: 20
    },
    {
        name: 'orange',
        price: 30
    }    

])

const age = ref(10);

age.value+=1000;
console.log(age.value);


</script>
